<div
  class="login-container gradient d-flex align-items-start justify-content-center"
  [ngStyle]="{ 'background': backgroundStyle }"
  [ngClass]="{ 'anim': !backgroundStyle }"
>
  <div class="w-100 login-card d-flex py-4 flex-column">
    <img
      class="homebridge-logo mx-auto my-3"
      ngSrc="assets/homebridge-color-round.svg"
      alt="Homebridge Logo"
      height="100"
      width="100"
      priority="true"
    />
    <form novalidate (ngSubmit)="onSubmit()" [formGroup]="form">
      <h4 class="mb-4 text-center">{{ 'setup.welcome_to_homebridge' | translate }}</h4>
      @if (!twoFactorCodeRequired) {
      <div class="input-group mb-4">
        <span class="input-group-text custom-input"><i class="fas fa-user primary-text fa-lg"></i></span>
        <input
          #username
          formControlName="username"
          type="text"
          id="form-username"
          autofocus
          autocomplete="username"
          autocapitalize="none"
          tabindex="1"
          class="form-control custom-input"
          [placeholder]="'users.label_username' | translate"
          [ngClass]="{
            'is-invalid': form.controls.username.dirty && form.controls.username.errors
          }"
          required
        />
      </div>
      <div class="input-group mb-4">
        <span class="input-group-text custom-input"><i class="fas fa-lock primary-text fa-lg"></i></span>
        <input
          #password
          formControlName="password"
          type="password"
          id="form-pass"
          autocomplete="current-password"
          tabindex="2"
          class="form-control custom-input"
          [placeholder]="'users.label_password' | translate"
          [ngClass]="{
            'is-invalid': form.controls.password.dirty && form.controls.password.errors
          }"
          required
        />
      </div>
      } @if (twoFactorCodeRequired) {
      <div class="input-group mb-4">
        <span class="input-group-text custom-input"><i class="fas fa-key primary-text fa-lg"></i></span>
        <input
          #otp
          formControlName="otp"
          type="text"
          id="form-ota"
          autofocus
          autocomplete="one-time-code"
          autocapitalize="none"
          inputmode="numeric"
          pattern="[0-9]*"
          tabindex="1"
          class="form-control custom-input"
          [placeholder]="'login.label_2fa_code' | translate"
        />
      </div>
      } @if (invalidCredentials) {
      <div class="input-group no-border mb-4">
        <div class="input-group-text custom-input">
          <i class="fas fa-exclamation-triangle pink-text fa-lg"></i>
        </div>
        <div class="form-control custom-input">
          <div class="small grey-text fw-semibold">{{ 'login.invalid_credentials' | translate }}</div>
          <div class="small grey-text" [innerHTML]="'login.invalid_credentials_2' | translate"></div>
        </div>
      </div>
      } @if (invalid2faCode) {
      <div class="input-group no-border mb-4">
        <div class="input-group-text custom-input">
          <i class="fas fa-exclamation-triangle pink-text fa-lg"></i>
        </div>
        <div class="form-control custom-input">
          <div class="small grey-text fw-semibold">{{ 'login.invalid_code' | translate }}</div>
          <div class="small grey-text" [innerHTML]="'login.invalid_credentials_2' | translate"></div>
        </div>
      </div>
      }
      <div class="text-center">
        <button tabindex="3" id="submit-button" class="btn btn-primary mb-2" type="submit" [disabled]="form.invalid">
          {{ 'form.button_continue' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>
